<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <title>掷骰子游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .game-container {
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
            max-width: 500px;
            width: 100%;
            text-align: center;
            animation: slideIn 0.5s ease-out;
            overflow: visible;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 2.5rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

        .game-info {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            margin: 20px 0;
            border: 2px solid #e9ecef;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            margin: 10px 0;
            font-size: 1.1rem;
        }

        .info-label {
            color: #666;
            font-weight: bold;
        }

        .info-value {
            color: #2c3e50;
            font-weight: bold;
        }

        .game-output {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 15px;
            padding: 20px;
            margin: 20px 0;
            min-height: 150px;
            text-align: left;
            font-size: 1rem;
            line-height: 1.6;
            overflow-y: auto;
            max-height: 250px;
        }

        .input-group {
            display: flex;
            gap: 15px;
            margin: 20px 0;
            justify-content: center;
            flex-wrap: wrap;
        }

        input[type="number"] {
            padding: 15px;
            border: 2px solid #ddd;
            border-radius: 10px;
            font-size: 1.1rem;
            width: 150px;
            text-align: center;
            transition: all 0.3s ease;
        }

        input[type="number"]:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
        }

        button {
            padding: 15px 25px;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            min-width: 100px;
        }

        .btn-primary {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
        }

        .btn-primary:hover {
            background: linear-gradient(45deg, #5a6fd8, #6a4190);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .btn-primary:active {
            transform: translateY(0) scale(0.95);
        }

        .btn-secondary {
            background: linear-gradient(45deg, #6c757d, #545b62);
            color: white;
        }

        .btn-secondary:hover {
            background: linear-gradient(45deg, #5a6268, #44474a);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .btn-secondary:active {
            transform: translateY(0) scale(0.95);
        }

        .btn-success {
            background: linear-gradient(45deg, #28a745, #1e7e34);
            color: white;
        }

        .btn-success:hover {
            background: linear-gradient(45deg, #218838, #155724);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .btn-success:active {
            transform: translateY(0) scale(0.95);
        }

        .controls {
            display: flex;
            gap: 15px;
            margin-top: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .status {
            margin-top: 20px;
            padding: 15px;
            border-radius: 10px;
            font-weight: bold;
            font-size: 1.1rem;
        }

        .status.ready {
            background: linear-gradient(45deg, #d4edda, #c3e6cb);
            color: #155724;
            border: 2px solid #c3e6cb;
        }

        .status.playing {
            background: linear-gradient(45deg, #fff3cd, #ffeaa7);
            color: #856404;
            border: 2px solid #ffeaa7;
        }

        .status.won {
            background: linear-gradient(45deg, #d1ecf1, #bee5eb);
            color: #0c5460;
            border: 2px solid #bee5eb;
        }

        .hint {
            color: #666;
            font-style: italic;
            margin-top: 10px;
            font-size: 0.9rem;
        }

        .dice-display {
            width: 100px;
            height: 100px;
            margin: 0 20px;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-20deg) rotateY(-20deg);
            transition: transform 0.3s ease;
        }

        .dice-display:hover {
            transform: rotateX(-30deg) rotateY(-30deg);
        }

        .dice-face {
            position: absolute;
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, #ffffff, #f8f8f8);
            border: 2px solid #333;
            border-radius: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            padding: 10px;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }

        /* 3D骰子六个面的位置 */
        .dice-face.front {
            transform: translateZ(50px);
        }

        .dice-face.back {
            transform: rotateY(180deg) translateZ(50px);
        }

        .dice-face.right {
            transform: rotateY(90deg) translateZ(50px);
        }

        .dice-face.left {
            transform: rotateY(-90deg) translateZ(50px);
        }

        .dice-face.top {
            transform: rotateX(90deg) translateZ(50px);
        }

        .dice-face.bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }

        .dice-dot {
            width: 18px;
            height: 18px;
            background: #333;
            border-radius: 50%;
            margin: 2px;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
        }

        /* 骰子1点 - 前面 */
        .dice-face.front .dice-dot {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* 骰子2点 - 后面 */
        .dice-face.back .dice-dot:nth-child(1) {
            position: absolute;
            top: 25%;
            left: 25%;
        }
        .dice-face.back .dice-dot:nth-child(2) {
            position: absolute;
            bottom: 25%;
            right: 25%;
        }

        /* 骰子3点 - 右面 */
        .dice-face.right .dice-dot:nth-child(1) {
            position: absolute;
            top: 25%;
            left: 25%;
        }
        .dice-face.right .dice-dot:nth-child(2) {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .dice-face.right .dice-dot:nth-child(3) {
            position: absolute;
            bottom: 25%;
            right: 25%;
        }

        /* 骰子4点 - 左面 */
        .dice-face.left .dice-dot:nth-child(1) {
            position: absolute;
            top: 25%;
            left: 25%;
        }
        .dice-face.left .dice-dot:nth-child(2) {
            position: absolute;
            top: 25%;
            right: 25%;
        }
        .dice-face.left .dice-dot:nth-child(3) {
            position: absolute;
            bottom: 25%;
            left: 25%;
        }
        .dice-face.left .dice-dot:nth-child(4) {
            position: absolute;
            bottom: 25%;
            right: 25%;
        }

        /* 骰子5点 - 上面 */
        .dice-face.top .dice-dot:nth-child(1) {
            position: absolute;
            top: 25%;
            left: 25%;
        }
        .dice-face.top .dice-dot:nth-child(2) {
            position: absolute;
            top: 25%;
            right: 25%;
        }
        .dice-face.top .dice-dot:nth-child(3) {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .dice-face.top .dice-dot:nth-child(4) {
            position: absolute;
            bottom: 25%;
            left: 25%;
        }
        .dice-face.top .dice-dot:nth-child(5) {
            position: absolute;
            bottom: 25%;
            right: 25%;
        }

        /* 骰子6点 - 下面 */
        .dice-face.bottom .dice-dot:nth-child(1) {
            position: absolute;
            top: 25%;
            left: 25%;
        }
        .dice-face.bottom .dice-dot:nth-child(2) {
            position: absolute;
            top: 25%;
            right: 25%;
        }
        .dice-face.bottom .dice-dot:nth-child(3) {
            position: absolute;
            top: 50%;
            left: 25%;
            transform: translateY(-50%);
        }
        .dice-face.bottom .dice-dot:nth-child(4) {
            position: absolute;
            top: 50%;
            right: 25%;
            transform: translateY(-50%);
        }
        .dice-face.bottom .dice-dot:nth-child(5) {
            position: absolute;
            bottom: 25%;
            left: 25%;
        }
        .dice-face.bottom .dice-dot:nth-child(6) {
            position: absolute;
            bottom: 25%;
            right: 25%;
        }

        @keyframes roll3dDice {
            0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
            25% { transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg); }
            50% { transform: rotateX(180deg) rotateY(360deg) rotateZ(180deg); }
            75% { transform: rotateX(270deg) rotateY(90deg) rotateZ(270deg); }
            100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
        }

        .rolling-3d {
            animation: roll3dDice 1s ease-in-out;
        }

        /* 骰子结果展示类 */
        .show-1 { transform: rotateX(0deg) rotateY(0deg); }
        .show-2 { transform: rotateX(0deg) rotateY(180deg); }
        .show-3 { transform: rotateX(0deg) rotateY(90deg); }
        .show-4 { transform: rotateX(0deg) rotateY(-90deg); }
        .show-5 { transform: rotateX(-90deg) rotateY(0deg); }
        .show-6 { transform: rotateX(90deg) rotateY(0deg); }

        .success-message {
            color: #28a745;
            font-weight: bold;
            font-size: 1.2rem;
            animation: bounce 0.5s ease-in-out;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            60% {
                transform: translateY(-5px);
            }
        }

        /* 移动端适配 - 上下结构 */
        @media (max-width: 768px) {
            body {
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                padding: 10px;
            }
            
            .game-container {
                padding: 20px;
                margin: 10px auto;
                overflow: visible;
                max-width: 100%;
            }
            
            h1 {
                font-size: 2rem;
                text-align: center;
                margin-bottom: 20px;
            }
            
            /* 游戏信息区域 */
            .game-info {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                padding: 15px;
                margin-bottom: 20px;
            }
            
            .info-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 8px 0;
            }
            
            /* 骰子显示区域 */
            .dice-display {
                width: 120px;
                height: 120px;
                margin: 20px auto;
                transform: rotateX(-20deg) rotateY(-20deg) scale(1.2);
            }
            
            .dice-face {
                width: 120px;
                height: 120px;
                border-radius: 12px;
                padding: 15px;
            }
            
            .dice-dot {
                width: 20px;
                height: 20px;
            }
            
            /* 输入区域 - 上下结构 */
            .input-group {
                flex-direction: column;
                align-items: center;
                gap: 15px;
                margin: 20px 0;
            }
            
            input[type="number"] {
                width: 250px;
                padding: 15px;
                font-size: 1.1rem;
                text-align: center;
            }
            
            /* 控制按钮区域 - 上下结构 */
            .controls {
                flex-direction: column;
                align-items: center;
                gap: 15px;
                margin-top: 20px;
            }
            
            button {
                width: 250px;
                padding: 15px 20px;
                font-size: 1.1rem;
                margin: 5px 0;
            }
            
            /* 游戏输出区域 */
            .game-output {
                padding: 15px;
                margin-top: 20px;
                text-align: center;
            }
        }

        @media (max-width: 480px) {
            body {
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                padding: 5px;
            }
            
            .game-container {
                padding: 15px;
                margin: 5px auto;
                overflow: visible;
            }
            
            h1 {
                font-size: 1.8rem;
                margin-bottom: 15px;
            }
            
            .game-info {
                grid-template-columns: 1fr;
                gap: 8px;
                padding: 12px;
                margin-bottom: 15px;
            }
            
            .game-output {
                padding: 12px;
            }
            
            .dice-display {
                width: 100px;
                height: 100px;
                margin: 15px auto;
                transform: rotateX(-20deg) rotateY(-20deg) scale(1.1);
            }
            
            .dice-face {
                width: 100px;
                height: 100px;
                padding: 12px;
            }
            
            .dice-dot {
                width: 16px;
                height: 16px;
            }
            
            input[type="number"] {
                width: 220px;
                padding: 12px;
                font-size: 1rem;
            }
            
            button {
                width: 220px;
                padding: 12px 18px;
                font-size: 1rem;
            }
        }

        @media (max-width: 320px) {
            body {
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                padding: 3px;
            }
            
            .game-container {
                padding: 10px;
                margin: 3px auto;
                overflow: visible;
            }
            
            h1 {
                font-size: 1.5rem;
                margin-bottom: 12px;
            }
            
            .game-info {
                grid-template-columns: 1fr;
                gap: 6px;
                padding: 10px;
                margin-bottom: 12px;
            }
            
            .game-output {
                padding: 10px;
            }
            
            .dice-display {
                width: 80px;
                height: 80px;
                margin: 12px auto;
                transform: rotateX(-20deg) rotateY(-20deg) scale(1);
            }
            
            .dice-face {
                width: 80px;
                height: 80px;
                padding: 10px;
                border-radius: 8px;
            }
            
            .dice-dot {
                width: 14px;
                height: 14px;
            }
            
            input[type="number"] {
                width: 180px;
                padding: 10px;
                font-size: 0.9rem;
            }
            
            button {
                width: 180px;
                padding: 10px 15px;
                font-size: 0.9rem;
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>🎲 掷骰子游戏</h1>
        
                <div class="game-info">
            <div class="info-row">
                <span class="info-label">骰子面数：</span>
                <span class="info-value">6面</span>
            </div>
            <div class="info-row">
                <span class="info-label">投掷次数：</span>
                <span class="info-value" id="rollCount">0</span>
            </div>
            <div class="info-row">
                <span class="info-label">总点数：</span>
                <span class="info-value" id="totalPoints">0</span>
            </div>
            <div class="info-row">
                <span class="info-label">平均点数：</span>
                <span class="info-value" id="averagePoints">0</span>
            </div>
        </div>
                <div class="input-group">
          <div class="dice-display" id="diceDisplay">
                <!-- 骰子1点 - 前面 -->
                <div class="dice-face front">
                    <div class="dice-dot"></div>
                </div>
                <!-- 骰子2点 - 后面 -->
                <div class="dice-face back">
                    <div class="dice-dot"></div>
                    <div class="dice-dot"></div>
                </div>
                <!-- 骰子3点 - 右面 -->
                <div class="dice-face right">
                    <div class="dice-dot"></div>
                    <div class="dice-dot"></div>
                    <div class="dice-dot"></div>
                </div>
                <!-- 骰子4点 - 左面 -->
                <div class="dice-face left">
                    <div class="dice-dot"></div>
                    <div class="dice-dot"></div>
                    <div class="dice-dot"></div>
                    <div class="dice-dot"></div>
                </div>
                <!-- 骰子5点 - 上面 -->
                <div class="dice-face top">
                    <div class="dice-dot"></div>
                    <div class="dice-dot"></div>
                    <div class="dice-dot"></div>
                    <div class="dice-dot"></div>
                    <div class="dice-dot"></div>
                </div>
                <!-- 骰子6点 - 下面 -->
                <div class="dice-face bottom">
                    <div class="dice-dot"></div>
                    <div class="dice-dot"></div>
                    <div class="dice-dot"></div>
                    <div class="dice-dot"></div>
                    <div class="dice-dot"></div>
                    <div class="dice-dot"></div>
                </div>
            </div>class="dice-dot"></div>
                </div>
            </div>
            <button class="btn-primary" onclick="rollDice()">掷骰子</button>
        </div>
        <div class="status ready" id="gameStatus">准备掷骰子</div>
        <div class="controls">
            <button class="btn-success" onclick="rollMultipleDice()">掷5次</button>
            <button class="btn-secondary" onclick="clearStats()">清空统计</button>
            <button class="btn-secondary" onclick="clearOutput()">清空记录</button>
        </div>
        

        
        <div class="game-output" id="gameOutput">
            欢迎来到掷骰子游戏！<br>
            点击"掷骰子"开始你的幸运之旅！<br>
            <span class="hint">💡 提示：你可以连续掷骰子，系统会自动统计你的数据！</span>
        </div>
    </div>

    <script>
        let rollCount = 0;
        let totalPoints = 0;
        let gameActive = true;
        
        // 初始化游戏
        function initGame() {
            updateStats();
            appendToOutput('🎮 欢迎来到掷骰子游戏！');
            appendToOutput('点击"掷骰子"开始你的幸运之旅！');
        }
        
        // 更新统计数据显示
        function updateStats() {
            document.getElementById('rollCount').textContent = rollCount;
            document.getElementById('totalPoints').textContent = totalPoints;
            const average = rollCount > 0 ? (totalPoints / rollCount).toFixed(2) : '0';
            document.getElementById('averagePoints').textContent = average;
        }
        
        // 掷骰子
        function rollDice() {
            if (!gameActive) return;
            
            const diceDisplay = document.getElementById('diceDisplay');
            
            // 添加3D滚动动画
            diceDisplay.classList.add('rolling-3d');
            
            setTimeout(() => {
                const result = Math.floor(Math.random() * 6) + 1;
                rollCount++;
                totalPoints += result;
                
                // 移除所有展示类
                diceDisplay.classList.remove('show-1', 'show-2', 'show-3', 'show-4', 'show-5', 'show-6');
                
                // 添加对应的展示类
                diceDisplay.classList.add(`show-${result}`);
                
                // 移除滚动动画
                diceDisplay.classList.remove('rolling-3d');
                
                // 更新统计
                updateStats();
                
                // 显示结果
                let message = '';
                if (result === 6) {
                    message = '🎉 太棒了！掷出了6点！';
                } else if (result === 1) {
                    message = '😅 运气不佳，只有1点';
                } else {
                    message = `🎲 掷出了${result}点！`;
                }
                
                appendToOutput(`第${rollCount}次：${message}`);
                
                // 检查特殊成就
                checkAchievements(result);
                
                updateStatus('继续掷骰子，试试你的运气！', 'playing');
                
            }, 1000);
        }
        
        // 掷5次骰子
        function rollMultipleDice() {
            if (!gameActive) return;
            
            appendToOutput('🎯 开始连续掷5次骰子...');
            let count = 0;
            
            const rollInterval = setInterval(() => {
                rollDice();
                count++;
                
                if (count >= 5) {
                    clearInterval(rollInterval);
                    const average = (totalPoints / rollCount).toFixed(2);
                    appendToOutput(`✅ 5次掷骰完成！平均点数：${average}`);
                }
            }, 800);
        }
        
        // 检查成就
        function checkAchievements(result) {
            if (rollCount === 1 && result === 6) {
                appendToOutput('🏆 首次掷骰就掷出6点！开门红！');
            }
            
            if (rollCount === 10) {
                const average = (totalPoints / rollCount).toFixed(2);
                if (average >= 4.5) {
                    appendToOutput('🌟 10次掷骰平均点数超过4.5，运气爆棚！');
                }
            }
            
            if (rollCount === 50) {
                appendToOutput('🎊 已掷骰50次！你是真正的骰子大师！');
            }
        }
        
        // 清空统计
        function clearStats() {
            rollCount = 0;
            totalPoints = 0;
            updateStats();
            appendToOutput('📊 统计数据已清空，重新开始！');
            updateStatus('准备掷骰子', 'ready');
            
            // 重置骰子显示为1点
            const diceDisplay = document.getElementById('diceDisplay');
            diceDisplay.classList.remove('show-1', 'show-2', 'show-3', 'show-4', 'show-5', 'show-6');
            diceDisplay.classList.add('show-1');
        }
        
        // 清空输出
        function clearOutput() {
            document.getElementById('gameOutput').innerHTML = '';
        }
        
        // 添加输出内容
        function appendToOutput(text) {
            const output = document.getElementById('gameOutput');
            output.innerHTML += text + '<br>';
            output.scrollTop = output.scrollHeight;
        }
        
        // 更新状态
        function updateStatus(text, type) {
            const status = document.getElementById('gameStatus');
            status.textContent = text;
            status.className = 'status ' + type;
        }
        
        // 增强的触摸反馈
        document.querySelectorAll('button').forEach(button => {
            button.addEventListener('touchstart', function(e) {
                // 不阻止默认行为，只添加触摸反馈
                this.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    this.style.transform = '';
                }, 150);
            }, { passive: true });
            
            button.addEventListener('touchend', function(e) {
                this.style.transform = '';
            }, { passive: true });
        });
        
        // 防止iOS橡皮筋效果，但不影响正常滚动
        let startY = 0;
        document.body.addEventListener('touchstart', function(e) {
            startY = e.touches[0].pageY;
        }, { passive: true });
        
        document.body.addEventListener('touchmove', function(e) {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            const scrollHeight = document.documentElement.scrollHeight;
            const clientHeight = document.documentElement.clientHeight;
            
            // 只在顶部和底部边界时阻止橡皮筋效果
            if ((scrollTop <= 0 && e.touches[0].pageY > startY) || 
                (scrollTop + clientHeight >= scrollHeight && e.touches[0].pageY < startY)) {
                e.preventDefault();
            }
        }, { passive: false });
        
        // 页面加载完成后初始化游戏
        window.addEventListener('load', function() {
            initGame();
        });
    </script>
</body>
</html>